// 学员成绩页面js

// 获取表格tbody
const tbody = document.querySelector('tbody')

// 封装一个渲染函数，调用接口渲染表格
async function render() {
  // 调用接口获取数据
  const res = await axios.get('/score/list')
  const object = res.data.data
  // 根据数据得到id数组
  const idArray = Object.keys(object)
  // 根据id映射tr数组
  // 每条id对应一行，就是一个tr
  const trArray = idArray.map(id => {
    // 根据id拿到学生对象
    const student = object[id]
    return `<tr>
    <th scope="row">${id}</th>
    <td>${student.name}</td>
    ${student.score.map((score, index) => `<td class="student-score" data-id="${id}" data-batch="${index + 1}">${score}</td>`).join('')}
  </tr>`;
  });
  // 把映射出来的tr拼接起来放到表格中
  tbody.innerHTML = trArray.join('')
}

// 首次渲染
render()

// tbody绑定双击
// dblclick双击事件
tbody.addEventListener('dblclick', (e) => {
  // 如果触发的dom包含student-score，就是分数
  if (e.target.classList.contains('student-score')) {
    // 放一个输入框进去
    // 创建一个input
    const input = document.createElement('input')
    input.value = e.target.textContent;
    // append方法，是把dom插入到子节点最后的位置
    e.target.append(input)
    // 获取焦点
    input.focus()

    // 同时只有一个input
    // 失去焦点，删除input
    input.onblur = () => input.remove()
    input.onkeyup = async (e) => {
      if (e.key === 'Enter') {
        console.log('用户按了回车');
        // 调用接口保存修改
        await axios.post('score/entry', {
          stu_id: input.parentElement.dataset.id,
          batch: input.parentElement.dataset.batch,
          score: +input.value,
        })
        // 刷新列表
        render()
      }
    }
  }
})